<template>
    <div>
        <!-- 表头 -->
        <div class="Head" v-if="Head">
            <!-- 仓库名称 -->
            <div class="Cusgory">
                <span style="margin-right: 10px">客户名称</span>
                <el-select v-model="adi.cId" placeholder="请选择仓库" style="margin-top: 10px">
                    <el-option v-for="item in ck" :key="item.cId" :label="item.name" :value="item.cId"></el-option>
                </el-select>
            </div>
            <!-- 货架名称 -->
            <div class="Cusgory">
                <span style="margin-right: 10px">是否月租</span>
                <el-select v-model="adi.month" placeholder="请选择操作类型" style="margin-top: 10px">
                    <el-option v-for="item in options" :key="item.month" :label="item.label" :value="item.month"></el-option>
                </el-select>
            </div>
            <div class="Cusgory">
                <span style="margin-right: 10px">租赁类型</span>
                <el-select v-model="adi.category" placeholder="请选择操作类型" style="margin-top: 10px">
                    <el-option v-for="item in options2" :key="item.category" :label="item.label" :value="item.category"></el-option>
                </el-select>
            </div>
            <div class="Cusgory">
                <span class="demonstration">租赁开始时间</span>
                <el-date-picker style="margin-top: 10px; margin-left: 10px" v-model="adi.start" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>
            <div class="Cusgory">
                <span class="demonstration">租赁结束时间</span>
                <el-date-picker style="margin-top: 10px; margin-left: 10px" v-model="adi.end" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>
            <!-- 搜索，重置按钮 -->
            <div class="But">
                <el-button type="primary" icon="el-icon-search" @click="serch()">搜索</el-button>
                <el-button icon="el-icon-refresh">重置</el-button>
            </div>
        </div>
        <!-- 表 -->
        <div class="function" style="margin-top: 10px; margin-top: 50px">
            <el-button type="primary" icon="el-icon-plus" plain @click="addLists">新增</el-button>
            <el-button type="danger" plain disabled icon="el-icon-delete">删除</el-button>
            <div style="float: right">
                <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
                    <el-button icon="el-icon-search" circle @click="Display"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                    <el-button icon="el-icon-refresh" circle></el-button>
                </el-tooltip>
            </div>
        </div>
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
                <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="uId" label="用户ID">
                <template slot-scope="scope">
                    {{scope.row.uId==0 ?'郑总' : ''}}
                </template>
            </el-table-column>
            <el-table-column prop="start" label="租赁开始时间"></el-table-column>
            <el-table-column prop="end" label="租赁结束时间"></el-table-column>
            <el-table-column prop="address" label="租赁时长">
                <template slot-scope="scope">
                    {{scope.row.end|time(scope.row.start)}}天
                </template>
            </el-table-column>
            <el-table-column prop="month" label="是否月租">
                <template slot-scope="scope">
                    {{scope.row.month==0 ?'是' : '否'}}
                </template>
            </el-table-column>
            <el-table-column prop="category" label="租赁类型">
                <template slot-scope="scope">
                    {{scope.row.category==0 ?'托盘' : scope.row.category==2 ? '立方' : '平方'}}
                </template>
            </el-table-column>
            <el-table-column prop="number" label="租赁数量"></el-table-column>
            <el-table-column prop="price" label="租赁单价"></el-table-column>
            <el-table-column prop="days" label="租赁费用/天"></el-table-column>
            <el-table-column prop="payTotal" label="租赁总价"></el-table-column>
            <el-table-column prop="payTotal" label="已支付金额"></el-table-column>
            <el-table-column prop="notPayTotal" label="未支付金额"></el-table-column>
            <el-table-column prop="payDays" label="已支付天数"></el-table-column>
            <el-table-column prop="notPayDays" label="未支付天数"></el-table-column>
            <el-table-column prop="isPay" label="是否已经付款">]
                <template slot-scope="scope">
                    {{scope.row.isPay==1 ?'已付款' : '未付款'}}
                </template>
            </el-table-column>
            <el-table-column prop="prick" label="是否已经扎帐">
                <template slot-scope="scope">
                    {{scope.row.prick==1 ?'已扎帐' : '未扎帐'}}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="250px">
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="el-icon-edit" @click="jump()">记录明细</el-button>
                    <el-button type="text" size="small" class="el-icon-edit" @click="jump2()">缴费确认</el-button>
                    <el-button type="text" size="small" class="el-icon-edit" @click="update(scope.row)">变更</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 添加仓库弹框 -->
        <el-dialog title="添加仓库" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="adi2">
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>客户名称</span>
                    <div style="float: left; width: 60%"><el-select v-model="adi2.cId" placeholder="请选择仓库">
                        <el-option v-for="item in ck" :key="item.cId" :label="item.name" :value="item.cId"></el-option> </el-select
                ></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>是否月租</span>
                    <div style="float: left; width: 60%">
                        <el-select v-model="adi2.month" placeholder="请选择操作类型">
                        <el-option v-for="item in options" :key="item.month" :label="item.label" :value="item.month">
                            </el-option> </el-select
                ></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>租赁类型</span>
                    <div style="float: left; width: 60%"><el-select v-model="adi2.category" placeholder="请选择操作类型" >
                        <el-option v-for="item in options2" :key="item.category" :label="item.label" :value="item.category"></el-option> </el-select
                ></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>租赁数量</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入租赁数量" v-model="adi2.number"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>单价</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入单价" v-model="adi2.price"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>租赁费用/天</span>
                    <div style="float: left; width: 60%"><el-input placeholder="请输入租赁费用/天" v-model="adi2.days"></el-input></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>租赁开始时间</span>
                    <div style="float: left; width: 60%"><el-date-picker
                        v-model="adi2.start"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择租赁开始时间"
                    >
                    </el-date-picker
                ></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>租赁结束时间</span>
                    <div style="float: left; width: 60%">
                        <el-date-picker
                        v-model="adi2.end"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择租赁结束时间"
                    >
                    </el-date-picker
                >
                    </div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>是否已经付款</span>
                    <div style="float: left; width: 60%"><el-select v-model="adi2.isPay" placeholder="请选择">
                        <el-option v-for="item in options3" :key="item.isPay" :label="item.label" :value="item.isPay"></el-option> </el-select
                ></div>
                </div>
                <div style="float: left; width: 100%; margin-bottom: 20px">
                    <span>是否已经扎帐</span>
                    <div style="float: left; width: 60%"><el-select v-model="adi2.prick" placeholder="请选择">
                        <el-option v-for="item in options4" :key="item.prick" :label="item.label" :value="item.prick"></el-option> </el-select
                ></div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dw">取 消</el-button>
                <el-button type="primary" @click="conVarSum">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { liststorage, listcustomer, storagead,storageup } from '../../api/user.js';
export default {
    data() {
        return {
            // 表头隐藏
            Head: true,
            // 添加框
            dialogVisible: false,
            value: '',
            value3: '',
            tableData: [],
            ck: [],
            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
            // 添加输入框
            adi: {},
            adi2:{},
            options: [
                {
                    month: '0',
                    label: '是'
                },
                {
                    month: '1',
                    label: '否'
                }
            ],
            options2: [
                {
                    category: '0',
                    label: '托盘'
                },
                {
                    category: '1',
                    label: '平方'
                },
                {
                    category: '2',
                    label: '立方'
                }
            ],
            // 是否付款
            options3: [
                {
                    isPay: '0',
                    label: '是'
                },
                {
                    isPay: '1',
                    label: '否'
                }
            ],
            // 是否扎帐
            options4: [
                {
                    prick: '0',
                    label: '是'
                },
                {
                    prick: '1',
                    label: '否'
                }
            ],
            total: null,
            // 日期
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            },
            value1: '',
            value2: ''
        };
    },
    methods: {
        // 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Rean();
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Rean();
        },
        // 记录明细跳转
        jump() {
            this.$router.push({
                path: '/Record'
            });
        },
        // 缴费确认跳转
        jump2() {
            this.$router.push({
                path: '/Payment'
            });
        },
        // 表格渲染
        Rean() {
            liststorage(this.page).then((a) => {
                this.tableData = a.rows;
                this.total = a.total;
            });
        },
         rean() {
            listcustomer(this.cId).then((res) => {
                this.ck = res.rows;
                console.log(res.rows);
            });
        },
         // 搜索
        serch() {
            liststorage(this.adi).then((res) => {
                console.log(res);
                this.tableData=res.rows
            });
        },
        //   添加弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        dw() {
            this.dialogVisible = false;
        },
        //新增按钮
        addLists() {
            console.log(this.adi);
            this.dialogVisible = true;
            this.Dialogtitle = '添加仓库';
            this.conVar = 0;
        },
        //修改按钮
        update(k) {
            this.Dialogtitle = '修改仓库';
            this.conVar = 1;
            this.adi2 = k;
            console.log(this.adi2);
            this.dialogVisible = true;
        },
        //弹框提交
        conVarSum() {
            this.dialogVisible = false;
            if (this.conVar == 0) {
                // console.log("添加");
                storagead(this.adi2).then((res) => {
                    console.log(res);
                    this.Rean();
                    this.$message.success('添加成功');
                });
            } else {
                storageup(this.adi2).then((res) => {
                    console.log(res);
                    this.Rean();
                    this.$message.success('修改成功');
                });
            }
        }
    },
    mounted() {
        this.Rean();
        this.rean()
        console.log(this.adi2);
    },
    filters:{
        time(end,start){
            let times = new Date(end)-new Date(start)
            times = times/(1000*3600*24)
            return times
        }
    }
};                                                                                                                                                                                                                   
</script>

<style scoped>
.Head {
    height: 50px;
}
/* 客户类别 */
.Cusgory {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusgory span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 客户名称 */
.Cusname {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusname span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 搜素，重置按钮 */
.But {
    height: 100%;
    float: left;
}
.But button {
    margin-top: 10px;
}
.adframe span {
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    text-align: right;
    width: 30%;
}
</style>